<template>
  <div>
    <div class="Y2invest-main">
      <!-- 页头 -->
      <div class="Y2head">
        <div class="Y2head-1">
        <router-link to="Fund"> <img src="../assets/img/返回箭头 (1).png" alt="" /></router-link>  
        </div>
        <div class="Y2head-2">基金定投</div>
      </div>
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          ><img
            src="../assets/img/轮播图1(基金定投).jpg"
            alt=""
            style="width: 350px; height: 190px; border-radius: 5px"
        /></van-swipe-item>
        <van-swipe-item
          ><img
            src="../assets/img/轮播图2(基金定投).webp"
            alt=""
            style="width: 350px; height: 190px; border-radius: 5px"
        /></van-swipe-item>
      </van-swipe>
      <!-- 选项 -->
      <div class="Y2select">
        <ul class="Y2select-1">
          <li @click="my">
            <img src="../assets/img/我的定投.png" alt="" />
            <p>我的定投</p>
          </li>
          <li>
            <img src="../assets/img/定投排行.png" alt="" />
            <p>定投排行</p>
          </li>
          <li>
            <img src="../assets/img/定投试算.png" alt="" />
            <p>定投试算</p>
          </li>
          <li>
            <img src="../assets/img/定投课堂.png" alt="" />
            <p>定投课堂</p>
          </li>
        </ul>
      </div>
      <!-- 广告图 -->
      <div class="advertising-img">
        <img src="../assets/img/广告图.jpg" alt="" />
      </div>
      <!-- 精选定投 -->
      <div class="choiceness">
        <div class="choiceness1">
          <a href="">热门债券</a>
        </div>
        <ul class="choiceness2">
          <li class="choiceness2-1">
            <div class="ch-1">
              <p>24.00%</p>
              <p>近一年涨幅</p>
            </div>
            <div class="ch-2">
              <p>景顺长城能源基建混合型...</p>
              <p>价值投资 严守安全边际</p>
            </div>
          </li>
          <li class="choiceness2-1">
            <div class="ch-1">
              <p>19.52%</p>
              <p>近一年涨幅</p>
            </div>
            <div class="ch-2">
              <p>华安智能生活混合型证券...</p>
              <p>高景气捕手 成长风均衡派</p>
            </div>
          </li>
          <li class="choiceness2-1">
            <div class="ch-1">
              <p>16.53%</p>
              <p>近一年涨幅</p>
            </div>
            <div class="ch-2">
              <p>大成景阳领先混合型证券...</p>
              <p>排名领先 近一年同类前3%</p>
            </div>
          </li>
        </ul>
      </div>
      <!-- 定投课堂 -->
      <div class="classroom">
        <div class="classroom-1">
          <a href="">基金资讯</a>
          <a href=""> <img src="../assets/img/跳转箭头.png" alt="" /> </a>
        </div>
        <ul class="classroom-2">
          <li class="cl1">
            <p>基金投资为什么要选择定投</p>
            <p>2023-05-06</p>
          </li>
          <li class="cl2">
            <img src="../assets/img/广告1.webp" alt="" />
          </li>
        </ul>
        <ul class="classroom-2">
          <li class="cl1">
            <p>如何选择基金定投的基金类型</p>
            <p>2023-05-04</p>
          </li>
          <li class="cl2">
            <img src="../assets/img/广告2.webp" alt="" />
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        require("../assets/img/127收支明细、财富、钱包-线性.png"),
        require("../assets/img/127收支明细、财富、钱包-线性.png"),
      ],
    };
  },
  methods: {
    my() {
      this.$router.push({
        name: "MyAutomatic",
        params: {},
      });
    },
  },
};
</script>

<style scoped src="../assets/css/invest.css">
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>